<template>
  <div>
    <p>父</p>
    <input type="text" v-model="lifemsg" />
    <Son :title="msg" :lifemsg="lifemsg" :num="num" :objdata="myobj" />
    <button @click="changeMsg">按钮</button>

    <p v-bind:class="{active:isAcitve,'demo':isDemo}">dsjflsjlkjmlk</p>
    <p v-bind:class="styleObj">dsjflsjlkjmlk</p>
    <p v-bind:class="styleObj11">styleObj11</p>
    <p v-bind:class="[demo1,demo2]">数组语法</p>
    <p v-bind:class="[{active:isAcitve} , 'info-'+id ]">info</p>
    <ul>
      <li
        :class="[{active:index%2 == 0},'info-'+id]"
        v-for="(name,index) in names"
        :key="index"
      >{{name}}</li>
    </ul>
    <p :style="stob">style</p>
    <p class="zhijie">直接用class</p>
  </div>
</template>

<script>
import Son from "./son";
export default {
  name: "style",
  components: {
    Son
  },
  methods: {
    changeMsg(event) {
      this.msg = "我是修改后的数据";
    }
  },
  data() {
    return {
      msg: "我是活的数据",
      lifemsg: "lifemsghelloaaaaa", //初始化
      num: 10,
      isAcitve: true,
      isDemo: true,
      styleObj: {
        active: true,
        demo: true
      },
      demo1: "demo11",
      demo2: "demo22",
      id: 10,
      names: ["123", "ddsd", "dsfwewe"],
      stob: {
        color: "red",
        fontSize: "30px"
      },
      myobj: {
        name: "zy",
        age: 20
      }
    };
  },
  computed: {
    styleObj11() {
      return {
        active: this.isAcitve,
        demo: this.isDemo
      };
    }
  }
};
</script>

<style scoped>
.active {
  color: brown;
  background: #f1f1f1;
}
.zhijie {
  color: blueviolet;
}
</style>